<script lang="ts" setup>
// @ts-ignore
import {getArticleByCategory} from "~/server/article.service";
// @ts-ignore
import {CategoryPath, ArticlePath} from "~/config/SystemConfig";

const artList = ref('' as any)

function getListByCategory() {
    getArticleByCategory().then(({data}: any) => {
        artList.value = data.data
    })
}

onMounted(() => {
    getListByCategory()
})
</script>

<template>
    <section class="flex categories fade-before fade-after">
        <h5 class="part-title">精选分类</h5>
        <ul class="flex-ul flow-ul no-scrollbar">
            <template v-for="item in artList">
                <li :class="'category '+item.id">
                    <a class="cat-info" :href="CategoryPath.Path+item.id" role="button">
                        <div class="cat-more">{{ item.categoryName }}</div>
                        <div class="cat-des line-clamp font-small">{{ item.categoryDesc }}</div>
                    </a>
                    <ul class="post-list">
                        <template v-for="u in item.articleList">
                            <li class="post">
                                <div class="post-img">
                                    <img :src="u.articleCover" :alt="u.articleTitle" class="loaded" loading="lazy">
                                </div>
                                <div class="post-info">
                                    <a :href="ArticlePath.Path + u.id"
                                       class="post-title line-clamp">{{ u.articleTitle }}</a>
                                </div>
                                <div class="post-meta">
                                    <time :datetime="u.createTime">{{ timeAgo(new Date(u.createTime)) }}</time>
                                    <span class="post-views">{{ u.viewCount + '°' }}</span>
                                    <span class="post-comments">
                                <a :href="ArticlePath.Path + u.id">{{ u.commentCount + '条' }}</a>
                            </span>
                                </div>
                            </li>
                        </template>
                    </ul>
                </li>
            </template>
        </ul>
        <nav class="part-btn">
            <div class="btn categories-btn">
                <button class="prev" @click="addScrollEventPrev('.categories', 'li')"></button>
                <button class="next" @click="addScrollEventNext('.categories', 'li')"></button>
            </div>
            <div class="btn more">
                <a href="/archives" role="button"><span>文章归档</span></a>
            </div>
        </nav>
    </section>
</template>
<style scoped>
@import "@/static/css/home/home-categories.css";
</style>
